<template>
  <div>
    <van-nav-bar title="留言板" color="#fff" />
    <input type="text" v-model="title" @keyup.enter="addLis" />
    <van-tabs v-model="activeName" @click="tab">
      <van-tab title="未读" name="1"></van-tab>
      <van-tab title="已读" name="2"></van-tab>
      <van-tab title="回收站" name="3"></van-tab>
    </van-tabs>
    <div v-for="(item,index) in $store.state.lists" :key="index">
      <van-row gutter="10" type="flex" align="center" v-if="item.activeName == activeName">
        <van-col span="4">
            <van-checkbox v-model="item.checked" v-if="item.activeName != 3" @click="$store.commit('yd',index)"></van-checkbox>
        </van-col>
        <van-col span="14">{{item.title}}</van-col>
        <van-col span="6">
            <button @click="$store.commit('del',index)" v-show="item.activeName == 3">删除</button>
            <button @click="$store.commit('hs',index)" v-show="item.activeName == 1">回收站</button>
        </van-col>
      </van-row>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [],
  //注册组件
  components: {},
  data() {
    return {
      title: "",
      activeName: 1,
    };
  },
  // 在实例创建完成后被立即调用最早开始使用 data和methods中数据的钩子
  created() {},
  //挂载完成，HTML已经被渲染到了页面上，这个阶段可以执行dom操作，可以进行数据请求
  mounted() {},
  //方法
  methods: {
    addLis() {
      if (this.title == "") {
        this.$toast.fail("请输入留言");
      }
      let obj = {
        activeName:1,
        title: this.title,
        checked: false,
        flag:false
      };
      this.$store.commit("addLis", obj);
      this.$toast.success('添加成功')
      this.title = ''
    },
    tab(name,title){
        console.log(name,title)
    }
  },
  //计算属性
  computed: {},
  //监听器
  watch: {},
  //自定义指令
  directives: {},
};
</script>

<style lang="scss" scoped>
.van-nav-bar {
  background: #0088dd;
}
input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  
}
</style>
